=<template>
  <div class="roster-container">
    <Breadcrumb>
      <BreadcrumbItem to="/socialsecurity/insurance">返回</BreadcrumbItem>
      <BreadcrumbItem>2020年8月参保管理</BreadcrumbItem>
    </Breadcrumb>
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex mt32">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
      </div>
    </div>

    <div class="header-carts mt20">
      <div class="cart-left">
        <div class="back">
          <Icon type="ios-arrow-back" size="22" />
        </div>
        <div class="date">2020年5月</div>
        <div class="forward">
          <Icon type="ios-arrow-forward" size="22" />
        </div>
      </div>
      <ul class="cart-right">
        <!-- <li class="c-r-item">
             <div class="c-r-item-wrap active">
               <div class="key">参保人数</div>
               <div class="value">--</div>
             </div>
        </li>-->
        <li
          class="c-r-item"
          v-for="(item, index) in cartList"
          :key="index"
          @click="changeCart(item,index)"
        >
          <div class="c-r-item-wrap" :class="{active:cartActiveIndex === index}">
            <div class="key">{{item.name}}</div>
            <div class="value" :class="{red:item.red}">{{item.detail}}</div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <ul class="table-actions flex">
        <li class="table-action-item">
          <Dropdown>
            <div>
              操作
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>批量导入</DropdownItem>
              <DropdownItem>添加参保</DropdownItem>
              <DropdownItem disabled>停止参保</DropdownItem>
              <DropdownItem disabled>补缴</DropdownItem>
              <DropdownItem>添加挂靠人员</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
        <li class="table-action-item">
          <Dropdown>
            <div>
              批量调整
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>批量导入</DropdownItem>
              <DropdownItem>添加参保</DropdownItem>
              <DropdownItem disabled>停止参保</DropdownItem>
              <DropdownItem disabled>补缴</DropdownItem>
              <DropdownItem>添加挂靠人员</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
        <li class="table-action-item">
          <Dropdown>
            <div>
              导出
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>按岗位职级排序</DropdownItem>
              <DropdownItem>按最早入职排序</DropdownItem>
              <DropdownItem>按最近入职排序</DropdownItem>
              <DropdownItem>工号升序</DropdownItem>
              <DropdownItem>工号降序</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>

        <li class="table-action-item">
          <Dropdown>
            <div>
              更多功能
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>按岗位职级排序</DropdownItem>
              <DropdownItem>按最早入职排序</DropdownItem>
              <DropdownItem>按最近入职排序</DropdownItem>
              <DropdownItem>工号升序</DropdownItem>
              <DropdownItem>工号降序</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
      </ul>

      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="data4"></Table>
      </div>
    </div>

    <div class="footer-section">
      <div class="btns-wrap">
        <Button class="save-btn-green c-btn mr12" @click="openModal">添加参保</Button>
        <Button class="pierced c-btn">导入参保</Button>
      </div>
      <div class="he">本月还未添加参保人~ 信息化管理社保公积金，代替传统 Excel 工具</div>
      <div class="desc-list flex">
          <div class="desc-list-item">
            <img
              src=""
              class="img-icon"
            />
            <div class="title-item">支持多人多地参保</div>
            <div class="desc-de">
              可添加多个城市的参保员工，
              <br />统一出账
            </div>
          </div>
          <div class="desc-list-item">
            <img
              src=""
              class="img-icon"
            />
            <div class="title-item">功能齐全</div>
            <div class="desc-de">
              参保、停保、挂靠、补缴、补差
              <br />导出参保清单，功能简易全面
            </div>
          </div>
          <div class="desc-list-item">
            <img
              src=""
              class="img-icon"
            />
            <div class="title-item">自动计算</div>
            <div class="desc-de">
              参保人数、社保公积金费用、增
              <br />减员人数自动计算
            </div>
          </div>
      </div>
    </div>


        <!-- next modal -->
    <Modal v-model="modal2" style="width:360px;">
      <p slot="header" style="font-weight:bold;">创建参保方案</p>
      <div class="m-c-content">
        <p class="center title">您还没创建任何参保方案</p>
        <div class="f-table-wrap">
          <div class="c-t c-t-list">
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">1.创建自主参保方案</div>
            </div>
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">2.返回本月添加参保人</div>
            </div>
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">3.添加参保成功</div>
            </div>
          </div>
        </div>
      </div>
      
      <div slot="footer">
        <div class="m-c-footer flex-center">
          <div class="m-c-right">
            <Button class="save-btn-green large" @click="addScheme">去创建参保方案</Button>
          </div>
        </div>
      </div>
    </Modal>
    <!-- next modal end -->

  </div>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      modal2:false,
      columns: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "合同公司",
          key: "city"
        },
        {
          title: "参保方案",
          key: "city"
        },
        {
          title: "参保城市",
          key: "city"
        },
        {
          title: "个人社保费",
          key: "city"
        },
        {
          title: "公司社保费",
          key: "city"
        },
        {
          title: "个人公积金费",
          key: "city"
        },
        {
          title: "公司公积金费",
          key: "city"
        }
      ],
      data4: [],
      openTableTitle: false,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      cartActiveIndex: 0,
      cartList: [
        {
          name: "参保人数",
          detail: "--",
          id: 1
        },
        {
          name: "本月新增",
          detail: "--",
          id: 1
        },
        {
          name: "本月停保",
          detail: "--",
          id: 1
        },
        {
          name: "个人社保",
          detail: "--",
          id: 1
        },
        {
          name: "公司社保",
          detail: "--",
          id: 1
        },
        {
          name: "个人公积金",
          detail: "--",
          id: 1
        },
        {
          name: "公司公积金",
          detail: "--",
          id: 1
        },
        {
          name: "合计",
          detail: "--",
          id: 1,
          red: true
        }
      ],
      rightCardCloseStatus: false
    };
  },
  methods: {
    openModal(){
      this.modal2 = true;
    },
        addScheme() {
      this.modal2 = false;
      this.$router.push("/socialsecurity/scheme/add");
    },
  }
};
</script>
<style lang="scss" scoped src="../index.scss"></style>